//40.Js链式运动 传入元素，css样式，终点
// aniType 运动方式  (normal fast slow)
// fn      回调函数,在运动结束时执行
function animate(ele, attr, end, aniType = "normal", fn) {
    //传统的获取非行内样式
    //cur 1. 记录盒子最开始的初始值  2. 记录每次运动时的当前位置
    var cur = parseFloat(getStyle(ele, attr));
    end = parseFloat(end);

    // var isAni;
    ele.isAni = true;

    var speed = 0; //初始速度
    clearInterval(timer);
    var timer = setInterval(function () {
        if (aniType == "normal") {
            // 匀速运动
            speed = end > cur ? 20 : -20;
        } else if (aniType == "fast") {
            // 加速运动
            speed = end > cur ? speed + 5 : speed - 5;
        } else if (aniType == "slow") {
            // 减速运动
            speed = (end - cur) / 10;
            speed = end > cur ? Math.ceil(speed) : Math.floor(speed);
        }
        cur += speed;
        ele.style[attr] = cur + "px";
        // console.log(cur, end, speed);
        if (Math.abs(end - cur) <= Math.abs(speed)) {
            clearInterval(timer);
            ele.style[attr] = end + "px";
            ele.isAni = false;

            if (fn) { //如果传入回调函数 => 在结束运动后执行
                fn()
            }


        }
    }, 10);
}

//33.js获取非行内样式的兼容ie方法
function getStyle(ele, attr) {
    if (window.getComputedStyle) {  //取值 判断方法是否存在   存在:常规浏览器
        return window.getComputedStyle(ele)[attr];
    } else {  //不存在 => IE
        return ele.currentStyle[attr];
    }
}

